גבולות שגיאה ב-TypeScript: תבניות סוגי טיפול בשגיאות ליישומים חזקים

בעולם פיתוח התוכנה, שגיאות בלתי צפויות הן בלתי נמנעות. מתקלות ברשת ועד לפורמטים נתונים בלתי צפויים, יישומים חייבים להיות מוכנים לטפל במצבים אלו בעדינות. TypeScript, עם מערכת הטיפוסים החזקה שלה, מציעה מסגרת חזקה לבניית יישומים עמידים. מאמר זה מתעמק במושג גבולות שגיאה ב-TypeScript, חוקר תבניות שונות של סוגי טיפול בשגיאות, שיטות מומלצות ודוגמאות מהעולם האמיתי כדי לצייד אתכם בידע ליצירת קוד יציב ותחזוקתי יותר.

הבנת החשיבות של טיפול בשגיאות

טיפול יעיל בשגיאות הוא קריטי לחוויית משתמש חיובית ולבריאות הכללית של יישום. כאשר שגיאות נותרות ללא טיפול, הן עלולות להוביל ל:

• קריסות והתנהגות בלתי צפויה: חריגות שלא נתפסו עלולות להפסיק את ביצוע הקוד שלכם, מה שמוביל לקריסות או לתוצאות בלתי צפויות.
• אובדן נתונים ושחיתות: שגיאות במהלך עיבוד או אחסון נתונים עלולות לגרום לאובדן נתונים או לשחיתות, ולהשפיע על משתמשים ועל שלמות המערכת.
• פגיעויות אבטחה: טיפול לקוי בשגיאות עלול לחשוף מידע רגיש או ליצור הזדמנויות למתקפות זדוניות.
• חוויית משתמש שלילית: משתמשים שנתקלים בהודעות שגיאה מסתוריות או בכשלים ביישום צפויים לחוות חוויה מתסכלת, מה שמוביל לאובדן אמון ואימוץ.
• ירידה בפרודוקטיביות: מפתחים מבלים זמן בדיבוג ופתרון שגיאות שלא טופלו, מה שמפריע לפרודוקטיביות הפיתוח הכוללת ומאט את מחזורי השחרור.

טיפול טוב בשגיאות, לעומת זאת, מספק:

• ירידה הדרגתית: היישום ממשיך לתפקד, גם אם חלק מסוים נתקל בשגיאה.
• משוב אינפורמטיבי: משתמשים מקבלים הודעות שגיאה ברורות ותמציתיות, שעוזרות להם להבין ולפתור את הבעיה.
• שלמות נתונים: פעולות חשובות מנוהלות באופן טרנזקציונלי, המגן על מידע חשוב של המשתמש.
• יציבות משופרת: היישום הופך עמיד יותר לאירועים בלתי צפויים.
• תחזוקתיות משופרת: קל יותר לזהות, לאבחן ולתקן בעיות כאשר הן מתעוררות.

מהם גבולות שגיאה ב-TypeScript?

גבולות שגיאה הם תבנית עיצוב המשמשת ללכידת שגיאות JavaScript בחלק מסוים של עץ רכיבים ולהצגת ממשק משתמש חלופי באופן עדין במקום לקרוס את כל היישום. למרות ש-TypeScript עצמה אינה כוללת תכונה ספציפית של "גבולות שגיאה", העקרונות והטכניקות ליצירת גבולות כאלה ניתנים ליישום בקלות ומשופרים על ידי בטיחות הטיפוסים של TypeScript.

הרעיון המרכזי הוא לבודד קוד שעלול להיות שגיא בתוך רכיב או מודול ייעודי. רכיב זה פועל כעטיפה, המנטרת את הקוד שבתוכו. אם מתרחשת שגיאה, רכיב גבול השגיאה "לוכד" את השגיאה, מונע ממנה להתפשט במעלה עץ הרכיבים ועלול לקרוס את היישום. במקום זאת, גבול השגיאה יכול להציג ממשק משתמש חלופי, לרשום את השגיאה, או לנסות להתאושש מהבעיה.

היתרונות של שימוש בגבולות שגיאה הם:

• בידוד: מונע משגיאות בחלק אחד של היישום להשפיע על אחרים.
• ממשק משתמש חלופי: מספק חוויית משתמש ידידותית יותר מאשר יישום שבור לחלוטין.
• רישום שגיאות: מסייע באיסוף מידע שגיאות לדיבוג וניטור.
• תחזוקתיות משופרת: מפשט את לוגיקת הטיפול בשגיאות ומקל על עדכון ותחזוקת הקוד.

תבניות סוגי טיפול בשגיאות ב-TypeScript

מערכת הטיפוסים של TypeScript יעילה ביותר בשילוב עם תבניות הטיפול בשגיאות הנכונות. להלן כמה תבניות נפוצות ויעילות לניהול שגיאות ביישומי TypeScript שלכם:

1. בלוקי Try-Catch

אבן הבניין היסודית של הטיפול בשגיאות ב-JavaScript וב-TypeScript הוא בלוק ה-`try-catch`. הוא מאפשר לכם לבצע קוד בתוך בלוק `try` וללכוד כל חריגה שנזרקת. זוהי פעולה סינכרונית, אידיאלית לטיפול בשגיאות ישירות בתוך פונקציה.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("An error occurred while fetching data:", error);
    // Handle the error (e.g., display an error message to the user)
    return Promise.reject(error);
  }
}

            

              
                Copy
              
            
          

בדוגמה זו, הפונקציה `fetchData` מנסה לאחזר נתונים מכתובת URL נתונה. אם קריאת ה-`fetch` נכשלת (למשל, שגיאת רשת, URL שגוי), או אם סטטוס התגובה אינו תקין, נזרקת שגיאה. בלוק ה-`catch` מטפל אז בשגיאה. שימו לב לשימוש ב-`Promise.reject(error)` כדי להפיץ את השגיאה, כך שגם הקוד הקורא יוכל לטפל בה. זה נפו עבור פעולות אסינכרוניות.

2. Promises וטיפול בשגיאות אסינכרוניות

פעולות אסינכרוניות נפוצות ב-JavaScript, במיוחד כאשר עוסקים ב-APIs, אינטראקציות עם בסיס נתונים ו-I/O של קבצים. Promises מספקות מנגנון רב עוצמה לטיפול בשגיאות בתרחישים אלו. בלוק ה-`try-catch` שימושי, אך במקרים רבים, תטפלו בשגיאות בתוך מתודות ה-`.then()` וה-`.catch()` של Promise.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("An error occurred while fetching data:", error);
      // Handle the error (e.g., display an error message to the user)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Data fetched successfully:", data);
  })
  .catch(error => {
    console.error("Failed to fetch data:", error);
    // Display a user-friendly error message
  });

            

              
                Copy
              
            
          

בדוגמה זו, הפונקציה `fetchData` משתמשת ב-Promise כדי לטפל בפעולת ה-`fetch` האסינכרונית. שגיאות נלכדות בבלוק ה-`.catch()`, ומאפשרות לכם לטפל בהן באופן ספציפי לפעולה האסינכרונית.

3. מחלקות שגיאה וסוגי שגיאה מותאמים אישית

TypeScript מאפשרת לכם להגדיר מחלקות שגיאה מותאמות אישית, המספקות טיפול בשגיאות מובנה ואינפורמטיבי יותר. זוהי פרקטיקה מצוינת ליצירת לוגיקת טיפול בשגיאות שניתן לעשות בה שימוש חוזר והיא בטוחה מבחינת טיפוסים. על ידי יצירת מחלקות שגיאה מותאמות אישית, תוכלו:

• להוסיף קודי שגיאה ספציפיים: להבחין בין סוגי שגיאה שונים.
• לספק הקשר: לאחסן נתונים נוספים הקשורים לשגיאה.
• לשפר קריאות ותחזוקתיות: להפוך את קוד הטיפול בשגיאות שלכם לקל יותר להבנה.

            
class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Assign the prototype explicitly
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Failed to fetch user data';
      if (response.status === 404) {
        errorMessage = 'User not found';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API Error:", error.message, error.statusCode, error.code);
      // Handle specific API error based on the code
      if (error.code === 'USER_NOT_FOUND') {
        // Show a 'user not found' message
      }
    } else {
      console.error("An unexpected error occurred:", error);
      // Handle other errors
    }
    throw error; // Re-throw or handle the error
  }
}

getUserData(123)
  .then(userData => console.log("User data:", userData))
  .catch(error => console.error("Error retrieving user data:", error));

            

              
                Copy
              
            
          

דוגמה זו מגדירה מחלקת `ApiError`, שיורשת ממחלקת `Error` המובנית. היא כוללת מאפייני `statusCode` ו-`code` כדי לספק יותר הקשר. הפונקציה `getUserData` משתמשת במחלקת השגיאה המותאמת אישית הזו, לוכדת ומטפלת בסוגי שגיאה ספציפיים. השימוש במפעיל `instanceof` מאפשר בדיקה בטוחה מבחינת טיפוסים וטיפול בשגיאה ספציפי המבוסס על סוג השגיאה.

4. סוג ה-`Result` (טיפול בשגיאות פונקציונלי)

תכנות פונקציונלי משתמש לעיתים קרובות בסוג `Result` (הנקרא גם סוג `Either`) כדי לייצג תוצאת הצלחה או שגיאה. תבנית זו מספקת דרך נקייה ובטוחה מבחינת טיפוסים לטפל בשגיאות. סוג `Result` כולל בדרך כלל שני וריאנטים: `Ok` (להצלחה) ו-`Err` (לכישלון).

            
// Define a generic Result type

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Division by zero' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Result:', result1.value);
} else {
  console.error('Error:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Result:', result2.value);
} else {
  console.error('Error:', result2.error);
}

            

              
                Copy
              
            
          

הפונקציה `divide` מחזירה או `Result` מסוג `Ok` המכיל את תוצאת החלוקה או `Result` מסוג `Err` המכיל הודעת שגיאה. תבנית זו מבטיחה שהקורא נאלץ לטפל במפורש הן בתרחישי הצלחה והן בתרחישי כישלון, מונעת שגיאות שלא טופלו.

5. Decorators (לטיפול מתקדם בשגיאות - נדיר לשימוש ישיר ליישום גבולות)

למרות שזו אינה תבנית ישירה לגבולות שגיאה, ניתן להשתמש ב-decorators כדי ליישם לוגיקת טיפול בשגיאות באופן דקלרטיבי. זה יכול להפחית קוד עודף ביישום שלכם. עם זאת, שימוש זה פחות נפו מהתבניות האחרות לעיל ליישום גבולות שגיאה בליבת היישום.

            

function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`Error in ${propertyKey}:`, error);
      // Handle the error here (e.g., log, display a default value, etc.)
      return null; // Or throw a more specific error
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Simulate an error
    if (Math.random() < 0.5) {
      throw new Error('Simulated network error');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

דוגמה זו מגדירה decorator `@handleError`. ה-decorator עוטף את המתודה המקורית, לוכד שגיאות ורושם אותן. זה מאפשר טיפול בשגיאות מבלי לשנות ישירות את הקוד של המתודה המקורית.

יישום גבולות שגיאה במסגרות פרונט-אנד (דוגמת React)

למרות שהמושגים הליבתיים נשארים דומים, יישום גבולות שגיאה משתנה מעט בהתאם למסגרת הפרונט-אנד בה אתם משתמשים. בואו נתמקד ב-React, המסגרת הנפוצה ביותר לבניית ממשקי משתמש אינטראקטיביים.

גבולות שגיאה ב-React

React מספקת מנגנון ספציפי ליצירת גבולות שגיאה. גבול שגיאה הוא רכיב React הלוכד שגיאות JavaScript בכל מקום בעץ הרכיבים היורדים שלו, רושם את השגיאות הללו, ומציג ממשק משתמש חלופי במקום לקרוס את כל היישום. גבולות שגיאה לוכדים שגיאות במהלך רינדור, מתודות מחזור חיים וב-constructors של כל הרכיבים היורדים שלהם.

מתודות מפתח ליצירת גבול שגיאה ב-React:

• `static getDerivedStateFromError(error)`: מתודה סטטית זו נקראת לאחר שרכיב צאצא זורק שגיאה. היא מקבלת את השגיאה כפרמטר וצריכה להחזיר אובייקט לעדכון המצב. היא משמשת לעדכון המצב, כגון הגדרת דגל `error` ל-`true` כדי להפעיל את ממשק המשתמש החלופי.
• `componentDidCatch(error, info)`: מתודה זו נקראת לאחר ששגיאה נזרקת על ידי רכיב צאצא. היא מקבלת את השגיאה ואובייקט המכיל מידע על הרכיב שזרק את השגיאה. היא משמשת בדרך כלל לרישום השגיאה. מתודה זו נקראת רק עבור שגיאות שמתרחשות במהלך רינדור הצאצאים שלה.

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error('Uncaught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <p>We're working on fixing it!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

רכיב `ErrorBoundary` זה עוטף את רכיבי הילד שלו. אם נזרקת שגיאה כלשהי בתוך הרכיבים העטופים, מתודת `getDerivedStateFromError` נקראת כדי לעדכן את המצב, מה שגורם לרכיב לעשות רינדור מחדש עם ממשק המשתמש החלופי. מתודת `componentDidCatch` משמשת לרישום שגיאות. כדי להשתמש ב-ErrorBoundary, פשוט עטפו חלקים מהיישום שלכם בתוכו:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

על ידי מיקום הרכיב `ErrorBoundary` סביב רכיבים שעלולים להיות בעייתיים, אתם מבודדים את הרכיבים הללו ומספקים ממשק משתמש חלופי במקרה של שגיאות, ומונעים קריסה של כל היישום.

גבולות שגיאה במסגרות אחרות (קונספטואלי)

בעוד שהפרטים היישומיים שונים, ניתן ליישם את העקרונות הליבתיים של גבולות שגיאה במסגרות פרונט-אנד אחרות כמו Angular ו-Vue.js. בדרך כלל תשיגו זאת באמצעות אסטרטגיות דומות:

• Angular: שימוש בטיפול בשגיאות רכיבים, מטפלי שגיאות מותאמים אישית ו-interceptors. שקלו להשתמש במחלקת `ErrorHandler` של Angular ולעטוף רכיבים שעלולים להיות בעייתיים עם לוגיקת טיפול בשגיאות.
• Vue.js: שימוש בבלוקי `try...catch` בתוך רכיבים או שימוש במטפלי שגיאות גלובליים הרשומים דרך `Vue.config.errorHandler`. ל-Vue יש גם תכונות לטיפול בשגיאות ברמת הרכיב דומות לגבולות שגיאה של React.

שיטות מומלצות לגבולות שגיאה וטיפול בשגיאות

כדי להשתמש ביעילות בגבולות שגיאה ובתבניות סוגי הטיפול בשגיאות, שקלו את השיטות המומלצות הללו:

• בודדו קוד שעלול להיות שגיא: עטפו רכיבים או חלקי קוד שסביר שיהיו בהם שגיאות בתוך גבולות שגיאה או מבני טיפול בשגיאות מתאימים.
• ספקו הודעות שגיאה ברורות: עצבו הודעות שגיאה ידידותיות למשתמש המספקות הקשר והכוונה למשתמש. הימנעו מז'רגון מסתורי או טכני.
• רשמו שגיאות ביעילות: יישמו מערכת רישום שגיאות חזקה למעקב אחר שגיאות, איסוף מידע רלוונטי (עקבות מחסנית, הקשר משתמש וכו'), והקלה על דיבוג. השתמשו בשירותים כמו Sentry, Bugsnag או Rollbar בסביבות ייצור.
• יישמו ממשקי משתמש חלופיים: ספקו ממשקי משתמש חלופיים משמעותיים המטפלים בשגיאות בעדינות ומונעים מהיישום כולו לקרוס. החלופי צריך ליידע את המשתמש מה קרה, ואם מתאים, להציע פעולות שהוא יכול לנקוט.
• השתמשו במחלקות שגיאה מותאמות אישית: צרו מחלקות שגיאה מותאמות אישית לייצוג סוגי שגיאות שונים והוסיפו הקשר ומידע נוספים לטיפול יעיל יותר בשגיאות.
• שקלו את היקף גבולות השגיאה: אל תעטפו את כל היישום בגבול שגיאה אחד, מכיוון שהוא עלול להסתיר בעיות יסודיות. במקום זאת, מקמו גבולות שגיאה באופן אסטרטגי סביב רכיבים או חלקים של היישום.
• בדקו טיפול בשגיאות: כתבו בדיקות יחידה ובדיקות אינטגרציה כדי לוודא שלוגיקת הטיפול בשגיאות שלכם פועלת כמצופה וכי ממשקי המשתמש החלופיים מוצגים כראוי. בדקו תרחישים בהם שגיאות עלולות להתרחש.
• נטרו ונתחו שגיאות: עקבו באופן קבוע אחר יומני השגיאות של היישום שלכם כדי לזהות בעיות חוזרות, לעקוב אחר מגמות שגיאה ולזהות אזורים לשיפור.
• שאפו לוולידציית נתונים: וודאו נתונים המתקבלים ממקורות חיצוניים כדי למנוע שגיאות בלתי צפויות הנגרמות מפורמטים נתונים שגויים.
• טפלו ב-Promises ובפעולות אסינכרוניות בזהירות: וודאו שאתם מטפלים בשגיאות שיכולות להתרחש בפעולות אסינכרוניות באמצעות בלוקי `.catch()` או מנגנוני טיפול בשגיאות מתאימים.

דוגמאות מהעולם האמיתי ושיקולים בינלאומיים

בואו נחקור כמה דוגמאות מעשיות לאופן שבו ניתן ליישם גבולות שגיאה ותבניות סוגי טיפול בשגיאות בתרחישים מהעולם האמיתי, תוך התחשבות בינאומית:

דוגמה: יישום מסחר אלקטרוני (אחזור נתונים)

דמיינו יישום מסחר אלקטרוני המציג רשימות מוצרים. היישום מאחזר נתוני מוצרים מ-API צדדי. גבול שגיאה משמש לטיפול בבעיות פוטנציאליות בקריאות ה-API.

            

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... other product details
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API endpoint
    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading products...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Sorry, we're having trouble loading the products.</p>
          <p>Please try again later.</p>
          <p>Error details: {error.message}</p> {/* Log the error message for debugging */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Error Boundary (React Component)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true, error: error };
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // You can also log the error to an error reporting service
      console.error('Product List Error:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Render a fallback UI (e.g., error message, retry button)
        return (
          <div className="product-list-error">
            <h2>Oops, something went wrong!</h2>
            <p>We are unable to load product information at this time.</p>
            <button onClick={() => window.location.reload()} >Retry</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Usage
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

בדוגמה זו:

• `ProductList` מאחזר נתוני מוצרים. הוא מטפל במצב הטעינה, בנתוני המוצרים המוצלחים ובמצב השגיאה בתוך הרכיב.
• `ProductListErrorBoundary` משמש לעטיפת הרכיב `ProductList` כדי ללכוד שגיאות במהלך הרינדור וקריאות API.
• אם בקשת ה-API נכשלת, `ProductListErrorBoundary` יציג הודעת שגיאה ידידותית למשתמש במקום לקרוס את ממשק המשתמש.
• הודעת השגיאה מספקת אפשרות "נסה שוב" המאפשרת למשתמש לרענן.
• שדה ה-`currency` בנתוני המוצר יכול להיות מוצג כראוי על ידי שימוש בספריות בינאום (למשל, Intl ב-JavaScript), המספקות עיצוב מטבע בהתאם להגדרות המקומיות של המשתמש.

דוגמה: ולידציית טפסים בינלאומית

שקלו טופס שאוסף נתוני משתמש, כולל פרטי כתובת. ולידציה נאותה חיונית, במיוחד כאשר עובדים עם משתמשים ממדינות שונות עם פורמטי כתובת שונים.

            

// Assume a simplified address interface
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Default country
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Clear any previous errors for this field
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Submit the form (e.g., to an API)
      alert('Form submitted!'); // Replace with actual submission logic
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Validation rules based on the selected country
    if (!address.street) {
      errors.street = 'Street address is required';
    }
    if (!address.city) {
      errors.city = 'City is required';
    }

    // Example: postal code validation based on the country
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid US postal code';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid Canadian postal code';
        }
        break;
      // Add more countries and validation rules
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Postal code is required';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        />
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        />
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Postal Code:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        />
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Country:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <!-- Add more countries -->
        </select>

        <button type="submit">Submit</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

בדוגמה זו:

• רכיב `AddressForm` מנהל את נתוני הטופס ולוגיקת הוולידציה.
• הפונקציה `validateAddress` מבצעת ולידציות המבוססות על המדינה שנבחרה.
• כללי ולידציית מיקוד ספציפיים למדינה מיושמים (US ו-CA מוצגים).
• היישום משתמש ב-API של `Intl` לעיצוב מודע מקומי. זה ישמש לעיצוב דינמי של מספרים, תאריכים ומטבעות בהתאם למקומיות הנוכחית של המשתמש.
• ניתן לתרגם הודעות שגיאה כדי לספק חוויית משתמש טובה יותר ברחבי העולם.
• גישה זו מאפשרת למשתמשים למלא את הטופס בצורה ידידותית למשתמש, ללא קשר למיקומם.

שיטות מומלצות לבינאום:

• השתמשו בספריית לוקליזציה: ספריות כמו i18next, react-intl או LinguiJS מספקות תכונות לתרגום טקסט, עיצוב תאריכים, מספרים ומטבעות בהתבסס על המקומיות של המשתמש.
• ספקו בחירת מקומיות: אפשרו למשתמשים לבחור את השפה והאזור המועדפים עליהם. זה יכול להיות דרך תפריט נפתח, הגדרות, או זיהוי אוטומטי המבוסס על הגדרות הדפדפן.
• טפלו בפורמטים של תאריך, שעה ומספר: השתמשו ב-API של `Intl` לעיצוב תאריכים, שעות, מספרים ומטבעות באופן מתאים למקומיות שונות.
• קחו בחשבון כיווניות טקסט: עצבו את ממשק המשתמש שלכם כדי לתמוך בכיווניות טקסט משמאל לימין (LTR) ומימין לשמאל (RTL). קיימות ספריות המסייעות עם תמיכה ב-RTL.
• קחו בחשבון הבדלים תרבותיים: היו מודעים לנורמות תרבותיות בעת עיצוב ממשק המשתמש והודעות השגיאה שלכם. הימנעו משימוש בשפה או בדימויים שעלולים להיות פוגעניים או לא הולמים בתרבויות מסוימות.
• בדקו במקומיות שונות: בדקו ביסודיות את היישום שלכם במקומיות שונות כדי לוודא שהתרגום והעיצוב עובדים כראוי וכי ממשק המשתמש מוצג כראוי.

סיכום

גבולות שגיאה ב-TypeScript ותבניות סוגי טיפול בשגיאות יעילים הם רכיבים חיוניים בבניית יישומים אמינים וידידותיים למשתמש. על ידי יישום שיטות אלו, תוכלו למנוע קריסות בלתי צפויות, לשפר את חוויית המשתמש, ולייעל את תהליכי הדיבוג והתחזוקה. החל מבלוקי `try-catch` בסיסיים ועד לסוג `Result` המתוחכם יותר ומחלקות שגיאה מותאמות אישית, תבניות אלו מעצימות אתכם ליצור יישומים חזקים שיכולים לעמוד באתגרים של העולם האמיתי. על ידי אימוץ טכניקות אלו, תכתבו קוד TypeScript טוב יותר, ותספקו חוויה טובה יותר למשתמשים הגלובליים שלכם.

זכרו לבחור את תבניות הטיפול בשגיאות המתאימות ביותר לצרכים של הפרויקט שלכם ולמורכבות היישום שלכם. תמיד התמקדו באספקת הודעות שגיאה ברורות ואינפורמטיביות וממשקי משתמש חלופיים המנחים משתמשים דרך כל בעיה פוטנציאלית. על ידי ביצוע הנחיות אלו, תוכלו ליצור יישומים עמידים יותר, תחזוקתיים יותר, ובסופו של דבר, מוצלחים בשוק הגלובלי.

שקלו להתנסות בתבניות ובטכניקות אלו בפרויקטים שלכם, והתאימו אותן כדי להתאים לדרישות הספציפיות של היישום שלכם. גישה זו תתרום לאיכות קוד טובה יותר וחוויה חיובית יותר עבור כל המשתמשים.